﻿@namespace MudBlazor.Docs.Examples

<MudGrid>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetX" Label="Offset X" Color="Color.Primary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Primary" Option="@(Direction.Left)" Disabled="!OffsetX">Left</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Direction.Right)" Disabled="!OffsetX">Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="8">
        <MudPaper Elevation="0" Outlined="true" Class="ma-auto" Style="width:100px; height:100px;">
            <MudPopover Open="true" OffsetX="@OffsetX" OffsetY="@OffsetY" Direction="@Direction" Class="pa-4" Style="width:170px; position:relative;">
                <MudText>Popover Content</MudText>
            </MudPopover>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetY" Label="Offset Y" Color="Color.Secondary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Secondary" Option="@(Direction.Top)" Disabled="!OffsetY">Top</MudRadio>
            <MudRadio Color="Color.Secondary" Option="@(Direction.Bottom)"  Disabled="!OffsetY">Bottom</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code{
    public bool OffsetX { get; set; } = false;
    public bool OffsetY { get; set; } = true;
    public Direction Direction { get; set; } = Direction.Left;
}